<template>
	<view :class="['mx-sign-in-student', border ? 'border-bottom-1px': '']">
		<view class="student-avatar" :style="{backgroundImage: avatarUrl}"></view>
		<view class="student-info">
			<text class="student-name">{{student.nick_name}}</text>
			<text class="class-time">上课时间:{{classTime}}</text>
		</view>
		<!-- <view class="student-phone">
			<image src="/static/imgs/phone.png" mode="widthFix"></image>
		</view> -->
	</view>
</template>

<script>
	export default {
		name:"MxSignInStudent",
		props: {
			border: {
				type: Boolean,
				default: true
			},
			
			student: {
				type: Object
			},
			
			classTime: {
				type: String
			}
		},
		computed: {
			avatarUrl() {
				return `url(${this.student.avatar_url})`
			}
		}
	}
</script>

<style scoped lang="scss">
@import  '@/common/scss/var.scss';
@import  '@/common/scss/mixins.scss';
.mx-sign-in-student{
	box-sizing: border-box;
	padding: 60rpx 24rpx;
	width: 100%;
	font-family: $font-family;
	display: flex;
	align-items: center;
	
	.student-avatar{
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		@include bg-img-cover;
	}
	
	.student-info{
		margin-left: 24rpx;
		display: flex;
		flex-direction: column;
		.student-name{
			margin-bottom: 30rpx;
			font-size: 16px;
			font-weight: bold;
		}
		
		.class-time{
			font-size: 14px;
		}
	}
	
	.student-phone{
		margin-left: auto;
		margin-right: 4rpx;
		&>image{
			width: 56rpx;
		}
	}
}
</style>
